<!-- 封装toast组件，以插件的方式 -->
<template>
    <div class="toast" v-show="isShow">
        {{message}}
    </div>
</template>

<script>
    export default {
        name: 'Toast',
        data () {
            return {
                message:'',
                isShow: false
            }
        },
        methods: {
            show(message, delay=1500) {
                this.message = message;
                this.isShow = true;

                setTimeout(() => {
                    this.isShow = false;
                },delay)
            }
        }
    }
</script>

<style scoped>
    .toast {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 20px;
        border-radius: 8px;
        background-color: gray;
        color: white;
    }
</style>